<template>
  <div>
    <el-card shadow="always">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        label-width="120px"
        class="demo-ruleForm"
      >
        <div class="search_header">
          <div class="search_title">
            <el-icon><search /></el-icon>
            <span>筛选搜索</span>
          </div>
          <div search_btn>
            <el-button @click="resetForm(ruleFormRef)"> 重置 </el-button>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
              查询搜索
            </el-button>
          </div>
        </div>
        <div class="input_area">
          <el-form-item :label="props.currentLabel" prop="username">
            <el-input
              :placeholder="props.currentPlaceholder"
              v-model="ruleForm.username"
            />
          </el-form-item>
          <!-- 插槽 -->
          <slot name="inputSelect"></slot>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref } from "vue";
import { FormInstance, ElMessage, ElMessageBox } from "element-plus";
import { Search } from "@element-plus/icons-vue";

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  username: "",
});
let { username } = toRefs(ruleForm);
// 父传子值集合
const props = defineProps<{
  currentPlaceholder: string;
  currentLabel: string;
}>();
// 子传父事件集合
const emit = defineEmits(["submitSearch", "restSearch"]);

// 查询搜索按钮
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(valid => {
    if (valid) {
      // 子传父
      emit("submitSearch", username.value);
    } else {
      return false;
    }
  });
};

// 重置搜索表格
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;

  emit("restSearch", formEl);
  // formEl.resetFields();
};
</script>
<style lang="less" scoped>
.search_header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  .search_title {
    display: flex;
    align-items: center;
    span {
      margin-left: 8px;
    }
  }
}

.input_area {
  display: flex;
  flex-wrap: wrap;
  :deep(.el-input__inner) {
    width: 200px !important;
  }
}
</style>
